@extends('admin.layout.layout', ['row' => @$page])

@section('contain')

<div class="portlet">
    <div class="portlet-title">
        <div class="caption">
            <x-portlet-breadcrumb :page="$page"></x-portlet-breadcrumb>
        </div>
        <div class="actions">
            @if(session('admin.user_type')==1)
            <div class="item">
                <a href="/{{ request()->path() }}/create" class="btn btn-primary">{{ ts('addnew') }}</a>
            </div>
            @endif
        </div>
    </div>
    <div class="my-3 bg-light p-3 px-4">
        <div class="row">
            <div class="col-auto">
                <b>{{ ts('SDZH') }}</b>：
                <span>{{ @$distributor->unique_id }}</span>
            </div>
            <div class="col-auto">
                <b>{{ ts('SDQY') }}</b>：
                <span>{{ @$distributor->abbr }}</span>
            </div>
            <div class="col-auto">
                <b>{{ ts('COMPANYNAME') }}</b>：
                <span>{{ @$distributor->company_name }}</span>
            </div>
            <div class="col-auto">
                <b>{{ ts('DQZT') }}</b>：
                <span>{{ ts('UST'.@$distributor->status) }}</span>
            </div>

        </div>
    </div>

    <div class="filter-wrapper">
        <form action="/{{ request()->path() }}/" class="form-inline filter-form">
            <div class=" input-group mb-3 custom-control-inline">
                <input type="text" class="form-control s-input" name="value" value="{{ request()->input('value') }}" placeholder="{{ ts('DEALERSEARCHTEXT') }}">
            </div>
            {{--<div class="input-group mb-3 custom-control-inline">
                    <select name="status" class="form-control">
                        <option value="">{{ ts('select').' '.ts('status') }}</option>
            <option value="1" {{ request()->input('status') == 1 ? 'selected' : '' }}>{{ ts('active') }}</option>
            <option value="2" {{ request()->input('status') == 2 ? 'selected' : '' }}>{{ ts('deactive') }}</option>
            </select>
    </div>--}}
    <div class="input-group mb-3 custom-control-inline">
        <select name="mdtype" class="form-control">
            <option value="">{{ ts('select').' '.ts('jxsjb') }}</option>
            @foreach(range(1,4) as $v)
            <option value="{{ $v }}" {{ request()->input('mdtype') == $v ? 'selected' : '' }}>{{ ts('mdtype'.$v) }}</option>
            @endforeach
        </select>
    </div>

    <div class="mb-3">
        <button class="btn btn-primary">{{ ts('SEARCH') }}</button>
        <a href="/{{ request()->path() }}/" class="btn btn-warning">{{ ts('RESET') }}</a>
        <button type="button" class="btn btn-primary" onclick="tjMD('{{ @$distributor->id }}')">{{ ts('mdtj') }}</button>
    </div>

    </form>
</div>
<div>
    <div class="">
        <table class="table text-nowrap bt-table d-none">
            <thead>
                <tr class="order_column text-center">
                    {{--<th class="text-center">{{ ts('SELECT') }}</th>--}}
                    <th data-column="id">{{ ts('sequence') }}</th>
                    {{--<th data-column="unique_id">{{ ts('dealerID') }}</th>--}}
                    <th data-column="unique_id">{{ ts('JXSMC') }}</th>
                    <th data-column="mdtype">{{ ts('JXSJB') }}</th>
                    <th data-column="status">{{ ts('STATUS') }}</th>
                    <th data-column="first_name">{{ ts('CONTACTPERSON') }}</th>
                    <th data-column="phone_number">{{ ts('CONTACTINFORMATION') }}</th>
                    <th style="width:270px">{{ ts('OPERATIONS') }}</th>
                    {{--<th>{{ ts('city') }}</th>--}}
                </tr>
            </thead>
            <tbody>
                @foreach($data as $k => $v)
                <tr class="item-list">
                    {{--<td class="text-center">
                                <input type="checkbox" class="roll_icheck icheck_input" name="ids[]" value="{{ $v->id }}">
                    </td>--}}
                    <td>{{ @$data->firstItem()+$k }}</td>
                    {{--<td>{{ $v->id }}</td>--}}
                    <td>{{ @$v->abbr }}</td>
                    <th>{{ ts('mdtype'.@$v->mdtype) }}</th>
                    <td>
                        {{ $v->status ? ts('ACTIVE') : ts('DEACTIVE') }}
                    </td>
                    <td>{{ @$v->first_name }}</td>
                    <td>{{ rsPN(@$v->phone_number) }}</td>
                    <td class="fixed-td text-center" style="width:270px">
                        <a class="btn btn-success btn-sm" href='/admin/dealer/{{ $v->id }}'>{{ ts('VIEW') }}</a>
                        <span class="btn btn-danger btn-sm" onclick="editDealerStatus('{{ $v->id }}', '{{ $v->status }}', '{{ $v->abbr }}')">{{ $v->status != 1 ? ts('active') : ts('DEACTIVE') }}</span>
                        @empty(getDPN($v->id))
                        <span class="btn btn-dark btn-sm disabled">{{ ts('performance') }}</span>
                        @else
                        <a class="btn btn-primary btn-sm" href='/admin/dealer/{{ $v->id }}/performance'>{{ ts('performance') }}</a>
                        @endif
                        <a class="btn btn-primary btn-sm" href='/admin/dealer/{{ $v->id }}/stock'>{{ ts('KUCUN') }}</a>
                    </td>
                    {{--<td>{{ ts('cities.'.$v->city) }}</td>--}}
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    <div class="row my-3">
        {{--<div class="col-auto">
                    <label style="cursor: pointer"><input type="checkbox" class="icheck_all" data-ele=".roll_icheck"><span class="ml-2">{{ ts('SELECTALL') }}</span></label>
        <span class="btn btn-primary ml-3" onclick="deleteAlliCheck('.roll_icheck', '/admin/distributor/deletes')">{{ ts('delete') }}</span>
    </div>--}}
    <div class="col">
        {{ $data->appends(request()->input())->links() }}
    </div>
</div>
</div>

<div class="modal fade" id="mdModal">
    <div class="modal-dialog" style="width: 990px;max-width: 100%;">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title font-green">{{ ts('mdtj') }}</h5>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                {{--<h3 style="font-weight: bold;font-size: 16px;margin: 20px 0;">{{ ts('mdtj') }}</h3>
                <table class="table d-none" id="mdTable">
                    <thead>
                        <tr class="order_column text-center">
                            <th data-field="city" data-sortable="true">{{ ts('city') }}</th>
                            <th data-field="ava" data-sortable="true">{{ ts('UST1') }}</th>
                            <th data-field="unava" data-sortable="true">{{ ts('ust0') }} / {{ ts('JY') }}</th>
                            <th data-field="total" data-sortable="true">{{ ts('TOTAL') }}</th>
                        </tr>
                    </thead>
                </table>--}}
                <h3 style="font-weight: bold;font-size: 16px;margin: 20px 0;">{{ ts('jxsjb') }}（{{ ts('UST1') }}）</h3>
                <table class="table d-none" id="mdTable2">
                    <thead>
                        <tr class="order_column text-center">
                            <th data-field="city" data-sortable="true">{{ ts('city') }}</th>
                            <th data-field="mdtype1" data-sortable="true">{{ ts('MDTYPE1') }}</th>
                            <th data-field="mdtype2" data-sortable="true">{{ ts('MDTYPE2') }}</th>
                            <th data-field="mdtype3" data-sortable="true">{{ ts('MDTYPE3') }}</th>
                            <th data-field="mdtype4" data-sortable="true">{{ ts('MDTYPE4') }}</th>
                            <th data-field="mdtype5" data-sortable="true">{{ ts('MDTYPE5') }}</th>
                            <th data-field="mdtype0" data-sortable="true">{{ ts('MDTYPE0') }}</th>
                            <th data-field="mdtype6" data-sortable="true">{{ ts('MDTYPE6') }}</th>
                            <th data-field="mdtype7" data-sortable="true">{{ ts('MDTYPE7') }}</th>
                            <th data-field="mdtype8" data-sortable="true">小计</th>
                        </tr>
                    </thead>
                </table>

                <div class="pt-3 row">
                    <div class="col-6">
                        <div id="chart1"></div>
                    </div>
                    <div class="col-6">
                        <div id="chart2" style="width: 300px;height: 300px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>


@endsection

@section('script')
<script>
    $(document).ready(function() {
        $('.table.bt-table').bootstrapTable({
            fixedColumns: true,
            fixedNumber: 1,
            fixedRightNumber: 1,
        }).removeClass('d-none')
    })

    function mdT1(data) {
        var d1 = data['d1'];
        var d2 = data['d2'];
        var d3 = data['d3'];
        var string = '';
        for (var i in d3) {
            string += '<tr>';
            string += '<td>' + i + '</td>';
            string += '<td>' + (d1[i] || 0) + '</td>';
            string += '<td>' + (d2[i] || 0) + '</td>';
            string += '<td>' + (d3[i] || 0) + '</td>';
            string += '</tr>';
        }
        return string;
    }

    function mdD1(data) {
        var res = [];
        var d1 = data['d1'];
        var d2 = data['d2'];
        var d3 = data['d3'];
        for (var o in d3) {
            res.push({
                city: o,
                ava: (d1[o] || 0),
                unava: (d2[o] || 0),
                total: (d3[o] || 0),
            })
        }
        return res;
    }

    function rowstyle() {
        $('#mdTable2 tr').each(function(index, element) {
            // 假设你的<tr>有一个ID为"myTableRow"
            var lastChild = $(element).children(':last-child');
            lastChild.css("color","red");
        });
    }

    function mdD2(data) {
        var res = [];
        var d1 = data['m1'];
        console.log(data, 'asdfasdfasdf')
        for (var o in d1) {
            var item = Object.assign({}, d1[o], {
                city: o
            })
            res.push(item)
        }
        return res;
    }

    function tjMD(id) {
        request.get('/admin/ajax/tongji?a=md', {
                params: {
                    id: id
                }
            })
            .then(function(d) {
                $('#mdTable').bootstrapTable({
                    data: mdD1(d.data)
                }).removeClass('d-none');
                $('#mdTable2').bootstrapTable({
                    data: mdD2(d.data)
                }).removeClass('d-none');
                chart1(d.data);
                rowstyle();
                $('#mdModal').modal();
            })
    }

    function chart1(data) {
        var array1 = [0, 0, 0, 0, 0, 0, 0, 0];
        var m1 = data.m1;
        if (m1) {
            for (o in m1) {
                console.log(o, 'ooooooo')
                var d = m1[o];
                array1[0] = array1[0] + d.mdtype1;
                array1[1] = array1[1] + d.mdtype2;
                array1[2] = array1[2] + d.mdtype3;
                array1[3] = array1[3] + d.mdtype4;
                array1[4] = array1[4] + d.mdtype5;
                array1[5] = array1[5] + d.mdtype0;
                array1[6] = array1[6] + d.mdtype6;
                array1[7] = array1[7] + d.mdtype7;
            }
            var series1 = [];
            var legend1 =['授权店','旗舰店','合作店','其他', '外星人店',  '直营店',  'ASP服务商', '家居建筑膜服务商', 'T9电研社', 'PDI服务商'];
            array1.forEach((d, index) => {
                series1.push({
                    value: d,
                    name: legend1[index]
                })
            });
            var total = array1.reduce(function(prev, curr) {
                return prev + curr;
            });
            var option = {

                tooltip: {
                    trigger: 'item',
                    formatter: '{b} : {c}'
                },
                legend: {
                    // type: 'scroll',
                    orient: 'horizontal',
                    right: 10,
                    top: 20,
                    textStyle: {
                        fontSize: 12,
                    },
                    // bottom: 20,
                    // left: 'right',
                    data: ['授权店','旗舰店','合作店','其他', '外星人店',  '直营店',  'ASP服务商', '家居建筑膜服务商', 'T9电研社', 'PDI服务商'],
                    formatter: function(name) {
                        return name
                    }
                },
                series: [{
                    label: {
                        normal: {
                            position: 'inner',
                            show: false
                        }
                    },
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: series1,
                    hoverAnimation: false,
                    itemStyle: {
                        normal: {
                            color: function(params) {
                                var rand = "#" + Math.floor(Math.random() * (256 * 256 * 256 - 1)).toString(16);
                                var colorList = ['#434348', '#7cb5ec', '#f15c80', '#90ed7d', '#f7a35c', '#8085e9', '#e4d354', '#8085e8', '#8d4653', '#91e8e1', '#C33531', '#EFE42A', '#64BD3D', '#EE9201', '#29AAE3', '#B74AE5', '#0AAF9F', '#E89589', '#16A085', '#4A235A', '#C39BD3 ', '#F9E79F', '#BA4A00', '#ECF0F1', '#616A6B', '#EAF2F8', '#4A235A', '#3498DB'];
                                return colorList[params.dataIndex] || rand;
                            }
                        }
                    }
                }]
            }
            drawChart('chart2', option)

            let s = '<tr><td style="color:red;">总计</td>';
            array1.forEach((d, index) => {
                s += '<td style="color:red;">' + d + '</td>';
            });
            console.log(array1, 'array1array1')
            s += '<td style="color:red;">' + total + '</td></tr>';
            $("#mdTable2").append(s)
        }
    }




    function drawChart(ele, option) {
        var c1 = echarts.init(document.getElementById(ele), 'macarons')
        /*option = {
            title: {
                text: title,
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'right',
                data: legend,
            },
            series: [
                {
                    name: title,
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: series,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: function(params) {
                                var rand = "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);
                                var colorList = ['#7cb5ec','#434348','#90ed7d','#f7a35c','#8085e9','#f15c80','#e4d354','#8085e8','#8d4653','#91e8e1','#C33531','#EFE42A','#64BD3D','#EE9201','#29AAE3', '#B74AE5','#0AAF9F','#E89589','#16A085','#4A235A','#C39BD3 ','#F9E79F','#BA4A00','#ECF0F1','#616A6B','#EAF2F8','#4A235A','#3498DB'];
                                return colorList[params.dataIndex] || rand;
                            }
                        }
                    }
                }
            ]
        };*/
        c1.setOption(option)
    }
</script>
@endsection